import React, { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { FooterWrapper } from './style'
import classnames from 'classnames'
import { isPathPartlyExisted } from '../../utils'

// import 

export default function Footer(props) {
    const { pathname } = useLocation();
    // if (['/cities', '/homedetail'].indexOf(pathname) != -1) return;
    // 公共函数 - 在一个数组里实现每一项部分匹配 pathname
    console.log(pathname, isPathPartlyExisted(pathname))
    if (isPathPartlyExisted(pathname)) return
    return (
        <FooterWrapper>
            <Link to="/home" className={classnames({ active: pathname == '/home' || pathname == '/' })}>
                {/* ==  || 运算符优先级注意一下 */}
                <i className='iconfont icon-shouye'></i>
                <span>首页</span>
            </Link>
            <Link to="/find" className={classnames({ active: pathname == '/find' })}>
                <i className='iconfont icon-faxian'></i>
                <span>发现</span>
            </Link>
            <Link to="/order" className={classnames({ active: pathname == '/order' })}>
                <i className='iconfont icon-shouye1'></i>
                <span>订单</span>
            </Link>
            <Link to="/mine" className={classnames({ active: pathname == '/mine' })}>
                <i className='iconfont icon-wode'></i>
                <span>我的</span>
            </Link>
        </FooterWrapper>
    )
}
